<template>
  <!-- 联合巡检：巡检点位管理 -->
  <div class="posimanagement-index bigTableStyle">
    <div class="posimanagement-index-com">
      <OverviewMenu @changeData="changeData" />
      <div class="posimanagement-index-table">
        <div class="fromed">
          <div class="inspection-report-return">
            <div>
              <span class="icon"></span> 巡检点位管理
            </div>
            <div class="top-back" v-to-router="'/jointInspection'"></div>
          </div>
          <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="140px">
            <el-row :gutter="15">
              <el-col :span="6">
                <el-row :gutter="15">
                  <el-col :span="24">
                    <el-form-item label="检修时间：" prop="source">
                      <el-date-picker
                        :style="{width: '100%'}"
                        v-model="formData.startTime"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <!-- <el-col :span="7">
                <el-row :gutter="15">
                  <el-col :span="24">
                    <el-form-item label="检修结束时间：" prop="source">
                      <el-date-picker
                        :style="{width: '100%'}"
                        v-model="formData.endTime"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>-->
              <el-col :span="6">
                <el-row :gutter="15">
                  <el-col :span="24">
                    <el-form-item label="设备名称：" prop="jqrmc">
                      <el-input
                        v-model="formData.sbmc"
                        placeholder
                        type="text"
                        clearable
                        :style="{ width: '100%' }"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="6">
                <el-row :gutter="15">
                  <el-col :span="24">
                    <el-form-item label="点位名称：" prop="jqrmc">
                      <el-input
                        v-model="formData.dwmc"
                        placeholder
                        type="text"
                        clearable
                        :style="{ width: '100%' }"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="6">
                <el-row :gutter="15">
                  <el-col :span="24">
                    <el-form-item label="巡检类型：" prop="time">
                      <el-select
                        v-model="formData.xjlx"
                        placeholder="请选择"
                        clearable
                        :style="{width: '100%'}"
                      >
                        <el-option
                          v-for="(item, index) in InspectTypeList"
                          :key="index"
                          :label="item.name"
                          :value="item.code"
                          :disabled="item.disabled"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :offset="14" :span="10">
                <div class="inspection-report-index-btn">
                  <el-button
                    class="table-query"
                    type="primary"
                    @click="submitForm"
                    icon="el-icon-search"
                  >查询</el-button>
                  <el-button class="table-query" type="primary" @click="addForm">新增</el-button>
                  <el-button class="table-query" type="primary" @click="modifyForm">修改</el-button>
                  <el-button class="table-query" type="primary" @click="deleForm">删除</el-button>
                  <el-button class="table-query" type="primary" @click="importForm">从模板导入</el-button>
                  <el-button class="table-query" type="primary" @click="overhaulForm">检修设置</el-button>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="tableed">
          <el-table
            border
            :data="tableData"
            height="100%"
            ref="multipleTable"
            :row-class-name="tableRowClassName"
            style="height:100%;"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="myIndex" label="序号" width="80"></el-table-column>
            <el-table-column prop="SSDSMC" label="所属地市" width="150px" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="WHBZMC" label="维护班组" width="150px" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column
              prop="STATIONNAME"
              label="变电站名称"
              width="150px"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column prop="JGMC" label="间隔名称" width="150px" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="SBMC" label="设备名称" width="150px" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="SBLX" label="设备类型" :show-overflow-tooltip="true" width="150px"></el-table-column>
            <el-table-column prop="DWMC" label="点位名称" width="150px" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column
              prop="REALDATATYPE"
              label="巡检类型"
              width="150px"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="JXKSSJ"
              label="检修开始时间"
              width="150px"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="JXJSSJ"
              label="检修结束时间"
              width="150px"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="UPDATETIME"
              label="创建时间"
              width="150px"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.UPDATETIME">{{scope.row.UPDATETIME.substring(0,10)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="告警设置" width="150px" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <el-button type="text" @click="handleEdit(scope)">设置</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="paged elPaginationStyle">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pages.page"
            :page-sizes="[10, 20, 30]"
            :page-size="pages.pageSize"
            layout="total,prev, pager, next,sizes, jumper"
            :total="pages.totalSize"
          ></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      title="新增点位信息"
      top="20vh"
      :visible.sync="addFormState"
      width="35%"
      :before-close="addFormStateClose"
    >
      <addposiman
        :bzIdNma="bzIdNma"
        @inithandle="inithandle"
        :treeObj="treeObj"
        :treeName="treeName"
        @close="addFormStateClose"
        v-if="addFormState"
      />
    </el-dialog>
    <el-dialog
      title="修改点位信息"
      top="20vh"
      :visible.sync="editFormState"
      width="35%"
      :before-close="editFormStateClose"
    >
      <editposiman
        @inithandle="inithandle"
        :inspectiontypeOption="inspectiontypeOption"
        :bzIdNma="bzIdNma"
        :treeObj="treeObj"
        :treeName="treeName"
        :tableSelect="tableSelect"
        @close="editFormStateClose"
        v-if="editFormState"
      />
    </el-dialog>
    <el-dialog
      title="模板导入"
      top="20vh"
      :visible.sync="templetImportState"
      width="50%"
      :before-close="templetImportClose"
    >
      <templetImport
        @inithandle="inithandle"
        :cityOptionsList="cityOptions"
        :treeObj="treeObj"
        @close="templetImportClose"
        v-if="templetImportState"
      />
    </el-dialog>
    <el-dialog
      title="检修设置"
      top="20vh"
      :visible.sync="overhaulState"
      width="35%"
      :before-close="overhaulClose"
    >
      <overhaul
        @close="overhaulClose"
        @inithandle="inithandle"
        :tableSelect="tableSelect"
        v-if="overhaulState"
      />
    </el-dialog>
    <el-dialog
      title="告警设置"
      top="20vh"
      :visible.sync="alarmSetState"
      width="35%"
      :before-close="alarmSetClose"
    >
      <alarmSet :sz="sz" @inithandle="inithandle" @close="alarmSetClose" v-if="alarmSetState" />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import OverviewMenu from "./modules/OverviewMenu.vue";
import addposiman from "./modules/addposiman.vue";
import editposiman from "./modules/editposiman.vue";
import templetImport from "./modules/templetImport.vue";
import overhaul from "./modules/overhaul.vue";
import alarmSet from "./modules/alarmSet.vue";
import { JointInspectionModule } from "@/store/modules/JointInspection";
//loadsh
import lodash from "lodash";
import { log } from "three";
@Component({
  components: {
    OverviewMenu,
    addposiman,
    editposiman,
    templetImport,
    overhaul,
    alarmSet,
  },
})
export default class extends Vue {
  // 下拉框巡检类型
  get InspectTypeList() {
    let InspectTypeList = JointInspectionModule.getXslxList || [];
    // console.log(InspectTypeList);

    return InspectTypeList;
  }
  //搜索框from表单数据
  private formData = {
    substation: "", // 变电站ID
    xjlx: "", // 巡检类型
    sbmc: "", // 设备名称
    dwmc: "", // 点位名称
    startTime: [], // 检修开始时间
    endTime: [], // 检修结束时间（始）
  };
  //选择数据的id
  public ids = "";
  // 前一个表单数据
  oldForm = {};
  jclxOptions: { [key: string]: any } = [];
  rules = {
    time: [],
    alarm: [],
    source: [],
    name: [],
  };
  $refs!: {
    elForm: any;
  };
  // 勾选的消息
  tableSelect = [];
  newTab = [];
  // 表格选择事件
  handleSelectionChange(val: any): void {
    // console.log(val);
    this.tableSelect = val;
    this.ids = "";
    this.tableSelect.map((item: any) => {
      this.ids = this.ids + "," + item.ID;
    });
    this.ids = this.ids.substr(1);
    //  console.log('ids',this.ids);
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 1) {
      return "row1";
    } else {
      return "row2";
    }
  }
  //返回按钮
  goBack() {
    window.history.back();
  }

  // 提示消息
  private totast(msg: string) {
    this.$message({
      message: msg,
      duration: 0,
      showClose: true,
      type: "warning",
    });
  }
  // 查询
  submitForm() {
    // console.log("CompanyList:",this.CompanyList)
    this.$refs.elForm.validate((valid: any) => {
      if (!valid) return;
      // TODO 提交表单
      // console.log("this.formData:", this.formData);
      this.pages.page = 1;
      this.queryAuxRealtimeList();
    });
  }

  // 刷新
  resForm() {
    this.pages.page = 1;
    this.formData = {
      substation: "", // 变电站ID
      xjlx: "", // 巡检类型
      sbmc: "", // 设备名称
      dwmc: "", // 点位名称
      startTime: [], // 检修开始时间
      endTime: [], // 检修结束时间（始）
    };
    this.queryAuxRealtimeList();
  }
  // table表格相关事件数据
  private tableData = [
    // {
    //   CDSBID: "UNMEANING-4cfd7f75-5249-4c90-8cf1-d98cff8a59d0",
    //   CDSBMC: null,
    //   DWFL: null,
    //   DWMC: "sdf",
    //   ID: "8a40a01c747a987d01747b03b665003d",
    //   JGID: "4527",
    //   JGMC: "2号主变110kV进线",
    //   JGPX: "UNMEANING-54dfae3a-4c4e-4f3a-937f-4ec1dacb6aab",
    //   JQRSPID: null,
    //   JXJSSJ: "2020-09-17T15:14:33.000+00:00",
    //   JXKSSJ: "2020-09-17T15:14:33.000+00:00",
    //   NUM: 1,
    //   ORD: "UNMEANING-cd333374-dc50-4135-8095-4017e5c9cdcb",
    //   REALDATATYPE: "声音状态",
    //   ROOMID: "6008#11",
    //   ROOMNAME: "110kV开关室",
    //   SBID: "UNMEANING-c5f01fd8-53be-4785-9f8b-ffee19e0ebbf",
    //   SBLX: "隔离开关",
    //   SBMC: "21",
    //   SSDS: "8a1ea5c64bdebad1014bdebc55c80003",
    //   SSDSMC: "国网济南供电公司",
    //   STATIONID: "100000013",
    //   STATIONNAME: "220kV东门变电站",
    //   UPDATETIME: "2020-09-11T14:34:34.000+00:00",
    //   WHBZID: "8a1ea5c64bdebad1014bdebc55c8004d",
    //   WHBZMC: "运维二班",
    // },
  ];
  get newTableData() {
    let tableData = lodash.cloneDeep(this.tableData);
    return tableData;
  }
  //分页数据事件相关
  pages: { pageSize: number; page: number; totalSize: number } = {
    pageSize: 20,
    page: 1,
    totalSize: 0,
  };
  //   分页
  handleSizeChange(val: any) {
    // console.log(`每页 ${val} 条`);
    this.pages.pageSize = val;
    this.pages.page = 1;
    this.queryAuxRealtimeList();
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.pages.page = val;
    this.queryAuxRealtimeList();
  }

  // 监听查询条件变化
  @Watch("formData", { immediate: true, deep: true })
  setCdType(newForm) {
    let oldForm: any = this.oldForm;
    // 如果变电站id变化
    if (newForm.station !== oldForm.station) {
      // this.formData.jclx = "";
      this.queryTypes();
    }
    this.oldForm = lodash.cloneDeep(newForm);
  }

  // 查询测点类型
  queryTypes() {
    let form = this.formData;
    let params = {
      // station: form.station,
      type: "fk",
    };
    (this as any).$services
      .queryTypes({ data: params })
      .then((result: any) => {
        this.jclxOptions = result.data;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  //点击设置 数据
  sz = {};
  // 点击树，对应改变表格内容
  private treeData = {
    ssds: "", // 所属地市
    stationid: "", // 变电站ID
    roomid: "", // roomid
    jgid: "", // 间隔id
  };
  //点击树图的Id name
  treeObj: any = {};
  //点击的name
  treeName: any = "";
  //点击的班组 id nama
  bzIdNma: any = {};
  private changeData(val: any) {
    // console.log("val:", val);
    this.treeData = lodash.cloneDeep(val);
    let data = lodash.cloneDeep(val.data);
    this.treeName = data.name;
    // console.log(data);
    this.bzIdNma.whbzid = data.whbzId;
    this.bzIdNma.whbzmc = data.whbzMc;
    if (data.children.length > 0) {
      if (data.children[0].children.length > 0) {
        if (data.children[0].children[0].children.length > 0) {
          // 第一层：所在地市
          // console.log("第一层：所在地市",data);
          this.treeObj.ssdsmc = data.name;
          this.treeObj.ssds = data.code;
          if (this.treeObj.stationid) {
            this.$delete(this.treeObj, "jgname");
            this.$delete(this.treeObj, "jgid");
            this.$delete(this.treeObj, "roomname");
            this.$delete(this.treeObj, "roomid");
            this.$delete(this.treeObj, "stationname");
            this.$delete(this.treeObj, "stationid");
          }

          this.treeData.ssds = data.code;
          this.treeData.stationid = "";
          this.treeData.roomid = "";
          this.treeData.jgid = "";
        } else {
          // 第二层：变电站
          // console.log("第二层：变电站",data);
          this.treeObj.stationname = data.name;
          this.treeObj.stationid = data.code;
          if (this.treeObj.roomid) {
            this.$delete(this.treeObj, "jgname");
            this.$delete(this.treeObj, "jgid");
            this.$delete(this.treeObj, "roomname");
            this.$delete(this.treeObj, "roomid");
          }

          this.treeData.ssds = "";
          this.treeData.stationid = data.code;
          this.treeData.roomid = "";
          this.treeData.jgid = "";
        }
      } else {
        // 第三层：开关室
        // console.log("第三层：开关室",data);
        this.treeObj.roomname = data.name;
        this.treeObj.roomid = data.code;
        if (this.treeObj.jgid) {
          this.$delete(this.treeObj, "jgname");
          this.$delete(this.treeObj, "jgid");
        }

        this.treeData.ssds = "";
        this.treeData.stationid = "";
        this.treeData.roomid = data.code;
        this.treeData.jgid = "";
      }
    } else {
      // 第四层：间隔
      // console.log("第四层：间隔");
      this.treeObj.jgname = data.name;
      this.treeObj.jgid = data.code;

      this.treeData.ssds = "";
      this.treeData.stationid = "";
      this.treeData.roomid = "";
      this.treeData.jgid = data.code;
    }
    // console.log(this.treeObj,789);

    // 点了树重新查询表格
    this.queryAuxRealtimeList();
  }
  // 所属地市
  get CompanyList() {
    let CompanyList = JointInspectionModule.CompanyList || [];
    return CompanyList;
  }
  // 查询当前表格数据
  queryAuxRealtimeList() {
    // console.log("this.formData:", this.formData);
    var localCity = "";
    console.log("this.CompanyList:", this.CompanyList);

    if (this.CompanyList && this.CompanyList[0] && this.CompanyList[0].code) {
      localCity = this.CompanyList[0].code;
    } else {
      localCity = "8a1ea5c64bdebad1014bdebc6047087b";
    }
    let form = {
      ssds: localCity, // 所属地市
      stationid: this.treeData.stationid ? this.treeData.stationid : "", // 变电站ID
      roomid: this.treeData.roomid ? this.treeData.roomid : "", // 	roomid
      jgid: this.treeData.jgid ? this.treeData.jgid : "", // 间隔id
      sbmc: this.formData.sbmc, // 设备名称
      dwmc: this.formData.dwmc, // 点位名称

      JXKSSJKS:
        this.formData.startTime == null ? "" : this.formData.startTime[0], // 检修开始时间（始）
      JXKSSJJS:
        this.formData.startTime == null ? "" : this.formData.startTime[1], // 检修开始时间（至）
      JXJSSJKS: this.formData.endTime == null ? "" : this.formData.endTime[0], // 检修结束时间（始）
      JXJSSJJS: this.formData.endTime == null ? "" : this.formData.endTime[1], // 检修结束时间（至）

      page: this.pages.page, // 第几页
      rows: this.pages.pageSize, // 每页多少条
    };
    // console.log("this.formData:",this.formData);
    // console.log("form:",form);
    (this as any).$services
      .getPointerByParam({ data: form, method: "get" })
      .then((result: any) => {
        // console.log("result:", result);
        let data = result.data;
        let page = this.pages.page;
        let size = this.pages.pageSize;
        this.tableData = data.rows.map((v, i) => {
          v.myIndex = (page - 1) * size + i + 1;
          return v;
        });
        this.pages.totalSize = data.total;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  sideShotOptions = [
    {
      interval: "xxx点",
      id: 1,
    },
  ];
  systemOptions = [
    {
      interval: "其它类型",
      id: 1,
    },
  ];

  resetForm() {
    this.$refs.elForm.resetFields();
  }
  // form表单操作事件
  //新增
  addForm() {
    this.addFormState = true;
  }
  //修改
  modifyForm() {
    let selectTabLen = this.tableSelect.length;
    switch (selectTabLen) {
      case 1:
        this.editFormState = true;
        break;
      default:
        this.$message({ type: "warning", message: "请选择一条修改项！" });
        break;
    }
  }
  //删除
  deleForm() {
    let selectTabLen = this.tableSelect.length;
    switch (selectTabLen) {
      case 0:
        this.$message({
          type: "warning",
          message: "请选择一条或多条进行删除！",
        });
        break;
      default:
        this.$confirm("是否删除?", "删除", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // console.log("执行删除事件");
            (this as any).$services
              .delPointer({ data: { id: this.ids } })
              .then((result: any) => {
                // console.log(result);
                if (result.code === 200) {
                  this.$message({
                    type: "success",
                    message: `${result.message}`,
                  });
                  this.queryAuxRealtimeList();
                } else {
                  this.$message({
                    type: "error",
                    message: "操作失败!",
                  });
                }
              })
              .catch((err: object) => {
                console.log(err);
              });
            // this.$message({
            //   type: "success",
            //   message: "删除成功!",
            // });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
        break;
    }
  }
  //从模板导入
  importForm() {
    this.templetImportState = true;
  }
  //检修设置
  overhaulForm() {
    let selectTabLen = this.tableSelect.length;
    // console.log(selectTabLen);

    switch (selectTabLen) {
      case 1:
        this.overhaulState = true;
        break;
      default:
        this.$message({ type: "warning", message: "请选择一条检修！" });
        break;
    }
  }
  handleEdit(scope: any) {
    this.alarmSetState = true;
    // console.log(scope.row);
    this.sz = scope.row;
  }

  //弹窗相关
  addFormState = false;
  addFormStateClose() {
    this.addFormState = false;
  }

  editFormState = false;
  editFormStateClose() {
    this.editFormState = false;
  }

  templetImportState = false;
  templetImportClose() {
    this.templetImportState = false;
  }

  overhaulState = false;
  overhaulClose() {
    this.overhaulState = false;
  }

  alarmSetState = false;
  alarmSetClose() {
    this.alarmSetState = false;
  }

  //弹框保存调查询
  inithandle() {
    // console.log(123);
    this.submitForm();
    this.overhaulState = false;
    this.editFormState = false;
    this.addFormState = false;
    this.templetImportState = false;
    this.alarmSetState = false;
  }
  cityOptions = [];
  //巡检类型下拉
  inspectiontypeOption = [];
  initGetXjlx() {
    (this as any).$services
      .getXjlx({ data: {} })
      .then((result: any) => {
        this.inspectiontypeOption = result.data;
        // console.log(result, 456);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  //设备类型下拉
  initSblx() {
    (this as any).$services
      .getAddTemplateSblx({ data: {} })
      .then((result: any) => {
        // console.log(result);
        let sblxObj = result.data;
        this.cityOptions = [];
        sblxObj.forEach((item) => {
          this.cityOptions.push(item.SSSBLX);
        });
        // console.log(this.cityOptions);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  mounted() {
    // 查询表格数据
    this.queryAuxRealtimeList();
    this.initSblx();
    this.initGetXjlx();
  }
}
</script>

<style lang="scss" scoped>
.posimanagement-index {
  width: 100%;
  height: 100%;
  padding: 0.24rem;
  &-com {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
  }
  &-table {
    height: 100%;
    width: calc(100% - 3.2rem);

    .fromed {
      width: 100%;
      height: 160px;
      .inspection-report-return {
        height: 40px;
        display: flex;
        justify-content: space-between;
        > div {
          font-size: 0.18rem;
        }
        .icon {
          width: 0.16rem;
          height: 0.16rem;
          background: url("../../../../assets/img/JointInspection/xjjh_subtitle_icon.png")
            no-repeat center center;
          background-size: 100% 100%;
          display: inline-block;
        }
      }
    }
    .tableed {
      width: 100%;
      height: calc(100% - 220px);
    }
    .paged {
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .inspection-report-index-btn {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>

